<template>
  <div class="container">
    <div class="listItem">
      <!-- 每一项头条列表 -->
      <div class="containerItem" v-for="item in pageData" :key="item.hid">
        <div>
          <span class="text">{{ item.title }}</span>
        </div>
        <div class="detail">
          <!-- 根据类型显示不同的分类标签 -->
          <span class="category">{{ item.type == 1 ? "新闻" : item.type == 2 ? "体育" : item.type == 3 ? "娱乐" : item.type == 4 ? "科技" : "其他" }}</span>
          <span class="views">{{ item.pageViews }}浏览</span>
          <span class="time">{{ item.pastHours }}小时前</span>
        </div>
        <div class="actions">
          <el-button @click="toDetail(item.hid)" size="small" type="primary" plain>查看全文</el-button>
          <el-popconfirm v-if="item.publisher == type" @confirm="handlerDelete(item.hid)"
            :title="`您确定要删除${item.title}吗?`">
            <template #reference>
              <el-button size="small" type="danger" plain>删除</el-button>
            </template>
          </el-popconfirm>

          <el-button @click="Modify(item.hid)" v-if="item.publisher == type" size="small" type="warning" plain>修改</el-button>
        </div>
      </div>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="findNewsPageInfo.pageNum" v-model:page-size="findNewsPageInfo.pageSize"
          @size-change="getPageList" @current-change="getPageList" :page-sizes="[5, 7, 10]" background
          layout="prev, pager, next , ->, sizes, total" :total="totalSize" />
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 头条新闻列表页面组件
 * 负责展示新闻列表、分页、搜索、删除和修改等功能
 */
import { getfindNewsPageInfo, removeByHid } from "../../api/index"
import { ref, onMounted, getCurrentInstance, watch } from "vue"
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import pinia from '../../stores/index';
import { useUserInfoStore } from '../../stores/userInfo'

// 获取全局事件总线实例
const { Bus } = getCurrentInstance().appContext.config.globalProperties
// 用户信息状态管理
const userInfoStore = useUserInfoStore(pinia)
// 路由实例
const router = useRouter()
// 当前用户ID
const type = userInfoStore.uid

/**
 * 分页查询条件对象
 * 包含关键词、类型、页码和每页大小等查询参数
 */
const findNewsPageInfo = ref({
  keyWords: "", // 搜索标题关键字
  type: 0,           // 新闻类型
  pageNum: 1,        // 页码数
  pageSize: 5,     // 页大小
})

// 分页总数量
const totalSize = ref(0)

// 初始化列表数据
const pageData = ref([{
  hid: null,
  pageViews: null,
  pastHours: null,
  publisher: null,
  title: "",
  type: null
}])

// 接收header组件用户搜索的数据
Bus.on('keyword', (keywords) => {
  findNewsPageInfo.value.keyWords = keywords
})

// header点击切换高亮的时候传递过来的tid
Bus.on('tid', (type) => {
  findNewsPageInfo.value.type = type
})

/**
 * 监听查询条件变化
 * 当查询条件发生变化时，重新获取分页列表数据
 */
watch(() => findNewsPageInfo.value, () => {
  getPageList()
}, {
  deep: true,
})

/**
 * 获取分页列表数据
 * 向后端发起请求获取当前页的新闻列表数据，并更新分页相关信息
 */
const getPageList = async () => {
  let result = await getfindNewsPageInfo(findNewsPageInfo.value)
  pageData.value = result.pageInfo.pageData
  findNewsPageInfo.value.pageNum = result.pageInfo.pageNum
  findNewsPageInfo.value.pageSize = result.pageInfo.pageSize
  totalSize.value = +result.pageInfo.totalSize
}

/**
 * 组件挂载后的生命周期钩子
 * 初始化时获取第一页数据
 */
onMounted(() => {
  getPageList()
})

/**
 * 查看详情
 * 跳转到新闻详情页面
 * @param {number} hid - 新闻唯一标识符
 */
const toDetail = (hid) => {
  router.push({ name: "Detail", query: { hid } });
}

/**
 * 删除新闻
 * 删除指定ID的新闻并刷新列表
 * @param {number} id - 待删除新闻的唯一标识符
 */
const handlerDelete = async (id) => {
  await removeByHid(id)
  ElMessage.success('删除成功!')
  //重新获取列表请求
  getPageList()
}

/**
 * 修改新闻
 * 跳转到新闻编辑页面
 * @param {number} hid - 待修改新闻的唯一标识符
 */
const Modify = (hid) => {
  router.push({ name: "addOrModifyNews", query: { hid } });
}
</script>

<style lang="less" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  // 列表样式
  .listItem {
    width: 100%;

    .containerItem {
      margin-top: 20px;
      border-radius: 10px;
      border: 2px solid #ebebeb;
      width: 100%;
      padding: 20px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }

      div {
        margin-top: 15px;
      }

      .text {
        margin-left: 0;
        color: #353a3f;
        font-size: 18px;
        font-weight: 500;
      }

      .detail {
        span {
          margin-right: 20px;
          color: #8b778a;
          font-size: 14px;

          &.category {
            color: #4dabf7;
            font-weight: 500;
          }

          &.views {
            color: #868e96;
          }

          &.time {
            color: #adb5bd;
          }
        }
      }

      .actions {
        display: flex;
        gap: 10px;
      }
    }
  }

  .pagination-container {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>